<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart2'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.initChart()
    },
    methods:{
        initChart(){

            let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

            this.chart = echarts.init(document.getElementById(this.id))

            let option = {
                grid:{
                    top:"10%",
                    left:"22%",
                    bottom:"10%"
                },
                xAxis: {
                   show:false
                },
                yAxis:[
                    {
                        type:"category",//坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
                        inverse:true, //是否是反向坐标轴
                        data:["HTML5","CSS3","javascript","VUE","NODE"],
                        axisLine:{ //坐标 轴线
                            show:false
                        },
                        axisTick:{ //坐标轴刻度相关设置
                            show:false
                        },
                        axisLabel:{//坐标轴刻度标签的相关设置
                            color:'#fff' 
                        },
                    },
                    {
                        data:[702,350,610,793,664],
                        inverse:false,
                         axisLine:{ //坐标 轴线
                            show:false
                        },
                        axisTick:{ //坐标轴刻度相关设置
                            show:false
                        },
                        axisLabel:{//坐标轴刻度标签的相关设置
                            color:'#fff' 
                        },
                    }
                ],
                series:[
                    {
                      name:"条",
                      type:'bar',
                      data:[70,34,60,78,69],
                      yAxisIndex:0,
                      itemStyle:{
                          barBorderRadius:20,
                          color:function(params){
                              return  myColor[params.dataIndex]
                          }
                      },
                      barCategoryGap:50,
                      barWidth:10,
                      label:{
                          show:true,
                          position:'inside',
                          formatter:'{c}%'
                      }  
                    },
                    {
                        name: "框",
                        type: "bar",
                        barCategoryGap: 50,
                        barWidth: 15,
                        yAxisIndex: 1,
                        data: [100, 100, 100, 100, 100],
                        itemStyle: {
                            color: "none",
                            borderColor: "#00c1de",
                            borderWidth: 3,
                            barBorderRadius: 15
                        }
                    }
                ]
            } 

            this.chart.setOption(option)
        }
    }



}

</script>